<template>
  <div class="allocate-page-bg">
    <el-breadcrumb :separator-icon="ArrowRight" style="margin-bottom: 20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Goods' }">货品列表</el-breadcrumb-item>
      <el-breadcrumb-item>调拨记录</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查询框 -->
    <el-card class="form-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        
       
    
        <el-form-item label="调拨原因">
          <el-select
            v-model="formInline.reason"
            placeholder="请选择调拨原因"
            clearable
            style="width: 150px"
          >
            <el-option label="仓库已满" value="仓库已满" />
            <el-option label="库存不足" value="库存不足" />
            <el-option label="货品损坏" value="货品损坏" />
            <el-option label="其他原因" value="其他原因" />
          </el-select>
        </el-form-item>
        <el-form-item label="调拨日期">
          <el-date-picker
            v-model="formInline.wAllocatetime"
            type="date"
            placeholder="选择调拨日期"
            clearable
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getdata">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button type="success" @click="AddAllocate">
            <i class="el-icon-plus"></i> 新增调拨
          </el-button>
          <el-button type="warning" @click="EditSelected">
            <i class="el-icon-edit"></i> 编辑
          </el-button>
          <el-button type="danger" @click="DeleteSelected">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="allocateTableRef"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="wAllocatecoding" label="调拨编码" width="180">
          <template v-slot="scope">
            <el-tag
              link
              type="primary"
              size="small"
              @click="GetAllocateDetail(scope.row)"
            >
              {{ scope.row.wAllocatecoding }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="货品信息">
          <el-table-column prop="goodscoding" label="货品编码" width="150" />
          <el-table-column prop="goodsName" label="货品名称" width="150" />
          <el-table-column prop="barcode" label="条码" width="120" />
          <el-table-column prop="num" label="调拨数量" width="100" />
        </el-table-column>
        <el-table-column label="调拨信息">
          <el-table-column prop="reason" label="调拨原因" width="120">
            <template v-slot="scope">
              <el-tag v-if="scope.row.reason === '仓库已满'" type="warning"
                >仓库已满</el-tag
              >
              <el-tag v-else-if="scope.row.reason === '库存不足'" type="danger"
                >库存不足</el-tag
              >
              <el-tag v-else-if="scope.row.reason === '货品损坏'" type="info"
                >货品损坏</el-tag
              >
              <el-tag v-else type="default">{{ scope.row.reason }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="wAllocatetime" label="调拨时间" width="160">
            <template v-slot="scope">
              <span>{{
                moment(scope.row.wAllocatetime).format("YYYY-MM-DD HH:mm")
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库信息">
          <el-table-column
            prop="warehouseNoOutName"
            label="出库仓库"
            width="120"
          />
          <el-table-column
            prop="locationNoOutName"
            label="出库库位"
            width="120"
          />
        </el-table-column>
        <el-table-column label="入库信息">
          <el-table-column
            prop="warehouseNoInName"
            label="入库仓库"
            width="120"
          />
          <el-table-column
            prop="locationNoInName"
            label="入库库位"
            width="120"
          />
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              @click="GetAllocateDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button
              type="warning"
              size="small"
              @click="EditAllocate(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <table>
        <tr>
          <td>
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="slot, sizes"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
                一共{{ Page.totalcount }}条数据，当前第{{
                  Page.pageindex
                }}页，一共{{ Page.pagecount }}页
              </el-pagination>
            </div>
          </td>
          <td>
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout=" prev, pager, next,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
              >
                <el-button @click="handleCurrentChange(1)">首页</el-button>
              </el-pagination>
            </div>
          </td>
          <td>
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="jumper,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
                <el-button @click="handleCurrentChange(Page.pagecount)"
                  >尾页</el-button
                >
              </el-pagination>
            </div>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import service from "@/utils/request";

const router = useRouter();

onMounted(() => {
  getdata();
});

// 获取调拨详情
const GetAllocateDetail = (row: any) => {
  router.push({
    path: "/GetGoods_Details",
    query: { id: row.wAllocatecoding },
  });
};

// 表格多选相关
const selectedRows = ref<any[]>([]);
const allocateTableRef = ref();
const handleSelectionChange = (val: any[]) => {
  selectedRows.value = val;
};

// 编辑选中数据
const EditSelected = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请先选中数据");
    return;
  }
  const row = selectedRows.value[0];
  EditAllocate(row);
};

// 编辑调拨记录
const EditAllocate = (row: any) => {
  router.push({ path: "/AddAllocate", query: { id: row.wAllocatecoding } });
};

// 删除选中数据
const DeleteSelected = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请先选中数据");
    return;
  }
  if (confirm("确定要删除选中的调拨记录吗？")) {
    const ids = selectedRows.value.map((row) => row.wAllocatecoding);
    service
      .delete("/api/app/goods/w-allocates/" + ids)
      .then(() => {
        ElMessage.success("删除成功");
        getdata();
      })
      .catch(() => {
        ElMessage.warning("删除失败");
      });
  }
};

// 新增调拨
const AddAllocate = () => {
  router.push("/AddAllocate");
};

// 分页相关
const Page = reactive({
  pageindex: 1,
  pagecount: 0,
  pagesize: 10,
  totalcount: 0,
});

const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  Page.pagesize = val;
  getdata();
};

const handleCurrentChange = (val: number) => {
  Page.pageindex = val;
  getdata();
};

// 表格数据
const tableData = ref([]);

// 获取数据
const getdata = () => {
  const params: any = {
    reason: formInline.reason,
    Alldatetime: formInline.wAllocatetime,
    Pageindex: Page.pageindex,
    Pagesize: Page.pagesize,
  };

  // 只添加非空的查询参数
  if (formInline.wAllocatecoding)
    params.wAllocatecoding = formInline.wAllocatecoding;
  if (formInline.reason) params.reason = formInline.reason;
  if (formInline.wAllocatetime) params.wAllocatetime = formInline.wAllocatetime;

  service
    .get("/api/app/goods/w-allocates", { params })
    .then((res) => {
      tableData.value = res.data.pageDatas;
      Page.pagecount = res.data.totalPage;
      Page.totalcount = res.data.totalData;
    })
    .catch((error) => {
      console.error("获取调拨记录失败:", error);
      ElMessage.error("获取调拨记录失败");
    });
};

// 查询表单
const formInline = reactive({
  wAllocatecoding: "",
  goodscoding: "",
  goodsName: "",
  reason: "",
  wAllocatetime: "",
});
</script>

<style scoped>
.allocate-page-bg {
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  min-height: 100vh;
  padding: 32px;
}

.form-card,
.table-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-form-item__label {
  color: #409eff;
  font-weight: 500;
}

.el-table th {
  background: linear-gradient(90deg, #e3f0ff 0%, #b3e0ff 100%);
  color: #222;
  font-size: 15px;
}

.el-table {
  border-radius: 10px;
  overflow: hidden;
}

.el-button {
  border-radius: 20px;
  font-weight: 500;
  transition: box-shadow 0.2s;
}

.el-button:hover {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.el-button--primary {
  background: linear-gradient(90deg, #409eff 0%, #53c0ff 100%);
  border: none;
}

.el-button--success {
  background: linear-gradient(90deg, #67c23a 0%, #95d475 100%);
  border: none;
}

.el-button--danger {
  background: linear-gradient(90deg, #f56c6c 0%, #f89898 100%);
  border: none;
}

.el-button--warning {
  background: linear-gradient(90deg, #e6a23c 0%, #f0c78a 100%);
  border: none;
}

.el-tag {
  border-radius: 12px;
  font-weight: 500;
}

.demo-pagination-block {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>
